<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
  <div>
    <div class="banner">
      <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190510165615-heseke_logo.png" alt>
    </div>
    <MakeUp @listerson="fatherpop"></MakeUp>
    <div class="swiper">
      <div class="swiper_title">百万禾粉视频见证</div>
      <ul class="swiper_box">
        <li>
          <Video :vediourl="vediourl1" :fengmian="fengmian1"></Video>
        </li>
        <li>
          <Video :vediourl="vediourl2" :fengmian="fengmian2"></Video>
        </li>
        <li>
          <Video :vediourl="vediourl3" :fengmian="fengmian3"></Video>
        </li>
        <li>
          <Video :vediourl="vediourl4" :fengmian="fengmian4"></Video>
        </li>
        <li>
          <Video :vediourl="vediourl5" :fengmian="fengmian5"></Video>
        </li>
      </ul>
    </div>
    <Evaluation></Evaluation>

    <van-popup v-model="show">
      <div class="pop" v-for="(item, index) in consult" :key="index" v-if="currentPop == item.id">
        <div class="way1">1</div>
        <div class="way2">2</div>
        <img :src="item.qrcode">
        <p class="popp1">长按二维码添加老师立即申请使用</p>

        <p class="popp2">复制老师微信号到微信</p>
        <p class="popp3">添加好友申请使用 : {{item.wechat}}</p>
        <span
          v-clipboard:copy="item.wechat"
          v-clipboard:success="onCopy"
        >复制</span>
      </div>
          <!-- v-clipboard:error="onError" -->

    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
import { Swipe, SwipeItem } from 'vant'
import { Popup } from 'vant'

Vue.use(Swipe).use(SwipeItem)
Vue.use(Popup)
Vue.use(VueClipboard)

import { Toast } from 'vant'
Vue.use(Toast)

import Scroll from './components/Scroll'
import Evaluation from './components/Evaluation'
import MakeUp from './components/MakeUp'
import Video from './components/Video'
let href = window.location.href
let currentPop = /pop1/.test(href)
  ? 1
  : /pop2/.test(href)
  ? 2
  : /pop3/.test(href)
  ? 3
  : 3
export default {
  name: 'Home',
  data() {
    return {
      show: false,
      currentPop,
      consult: [
        {
          id: 1,
          wechat: 'bstq532',
          qrcode:
            'http://sucai.suoluomei.cn/sucai_zs/images/20190505152014-%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190505151944.jpg',
        },
        {
          id: 2,
          wechat: 'kt99845',
          qrcode:
            'http://sucai.suoluomei.cn/sucai_zs/images/20190505173345-%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190505173307.jpg',
        },
        {
          id: 3,
          wechat: 'gjjc567g',
          qrcode:
            'http://sucai.suoluomei.cn/sucai_zs/images/20190515152945-user7.png',
        },
      ],
      sysAppIds: 'kt99845',

      fengmian1:
        'http://sucai.suoluomei.cn/sucai_zs/video/20190514151543-video1.mp4?x-oss-process=video/snapshot,t_1500,f_jpg,w_128,h_192,m_fast',
      fengmian2:
        'http://sucai.suoluomei.cn/sucai_zs/video/20190514151546-video2.mp4?x-oss-process=video/snapshot,t_1500,f_jpg,w_128,h_192,m_fast',
      fengmian3:
        'http://sucai.suoluomei.cn/sucai_zs/video/20190514163436-video3.mp4?x-oss-process=video/snapshot,t_1500,f_jpg,w_128,h_192,m_fast',
      fengmian4:
        'http://sucai.suoluomei.cn/sucai_zs/video/20190514163441-video4.mp4?x-oss-process=video/snapshot,t_1500,f_jpg,w_128,h_192,m_fast',
      fengmian5:
        'http://sucai.suoluomei.cn/sucai_zs/video/20190515134257-video5.mp4?x-oss-process=video/snapshot,t_1500,f_jpg,w_128,h_192,m_fast',
     
      vediourl1:
        'http://sucai.suoluomei.cn/sucai_zs/video/20190514151543-video1.mp4',
      vediourl2:
        'http://sucai.suoluomei.cn/sucai_zs/video/20190514151546-video2.mp4',
      vediourl3:
        'http://sucai.suoluomei.cn/sucai_zs/video/20190514163436-video3.mp4',
      vediourl4:
        'http://sucai.suoluomei.cn/sucai_zs/video/20190514163441-video4.mp4',
      vediourl5:
        'http://sucai.suoluomei.cn/sucai_zs/video/20190515134257-video5.mp4',
    }
  },
  components: {
    MakeUp,
    Evaluation,
    Video,
    Scroll,
  },
  methods: {
    fatherpop() {
      this.show = true
    },
    onCopy() {
      Toast('复制成功')
    },
  },
}
</script>

<style lang="less" scoped>
.wrapper {
  height: 100vh;
  overflow: hidden;
}
.banner {
  width: 100%;
  height: 200px;
  img {
    width: 100%;
    height: 100%;
  }
}
.swiper {
  height: 200px;
  margin: 0 10px;
  .swiper_title {
    width: 100%;
    height: 20px;
    background: url('./../../assets/img/swipertitle.png') center center
      no-repeat;
    background-size: 100% auto;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  .swiper_box {
    width: 100%;
    display: inline;
    white-space: nowrap;
    overflow-x: scroll;
    float: left;
    overflow-y: hidden;
    li {
      display: inline-block;
    }
  }
}
.pop {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  div {
    width: 20px;
    height: 20px;
    color: white;
    background: black;
    position: absolute;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
  }
  .way1 {
    top: 10px;
    left: 30px;
  }
  .way2 {
    top: 200px;
    left: 30px;
  }
  img {
    width: 130px;
    height: 130px;
    margin-top: 20px;
  }
  p {
    margin-top: 8px;
    font-weight: 600;
  }
  .popp1 {
    margin-top: 8px;
  }
  .popp2 {
    margin-top: 35px;
  }
  span {
    padding: 5px 14px;
    border: 1px solid black;
    font-size: 14px;
    margin-top: 10px;
  }
}
</style>
